<template>
  <div class="container">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @cancel="$router.push('/')"
        @input="goSearch"
        @search="onSearch"
      />
    </form>
    <div class="hh" v-if="show" v-show="!hidden">
      <!-- 历史记录 -->
      <div class="history">
        <div class="top">
          <h4>历史记录</h4>
          <span
            class="iconfont iconicon-test"
            @click="clear"
            v-if="$store.state.historyList.length"
          ></span>
        </div>
        <div class="list">
          <div
            class="text"
            v-for="(item, index) in $store.state.historyList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="hot">
        <h4>热门搜索</h4>
        <div class="list">
          <div>美女</div>
          <div>美女</div>
          <div>美女</div>
          <div>美女</div>
        </div>
      </div>
    </div>
    <!-- 搜索出来的列表 -->
    <div
      class="searchList"
      v-if="!show"
      v-for="item in searchResultList"
      :key="item.id"
      @click="jump(item.id, item.title)"
      v-show="hidden"
    >
      <div class="searchResult">
        <span class="iconfont iconsearch"></span>
        <span class="text">{{ item.title }}</span>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
    <!-- 搜索结果 -->
    <newList
      v-for="item in searchNewList"
      :key="item.id"
      :item="item"
      v-show="hidden"
    />

    <div class="tips" v-if="tips">没有任何搜索结果</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import newList from "../components/newList";
export default {
  components: {
    newList,
  },
  data() {
    return {
      value: "",
      show: true,
      searchResultList: [],
      // historyList: [],
      tips: false,
      searchNewList: [],
      hidden: false,
    };
  },
  computed: {
    // ...mapState(["historyList"]),
  },
  methods: {
    ...mapMutations(["clear"]),
    // clear() {
    //   this.historyList = [];
    // },
    onSearch(value) {
      if (value != "") {
        this.$axios({
          url: "/post_search",
          method: "get",
          params: {
            keyword: value,
          },
        }).then((res) => {
          this.$store.commit("addHistory", value);
          if (res.data.data.length == 0 && this.searchResultList.length == 0) {
            this.tips = true;
          } else {
            this.tips = false;
          }
          let data = res.data.data;
          this.searchNewList = data;
          this.show = true;
          this.hidden = true;
        });
      }
    },
    goSearch(value) {
      //   console.log(this.historyList);
      this.show = false;
      this.hidden = true;
      if (!this.value) {
        this.show = true;
        this.searchNewList = "";
        this.hidden = false;
      }
      //   为空的时候不搜索
      if (this.value != "") {
        this.$axios({
          url: "/post_search_recommend",
          method: "get",
          params: {
            keyword: value,
          },
        }).then((res) => {
          // console.log(res);
          if (this.searchResultList.length !== 0) {
            this.tips = false;
          }
          // 数组去重
          let data = res.data.data;
          let obj = {};
          data = data.reduce((current, next) => {
            obj[next.title]
              ? ""
              : (obj[next.title] = true && current.push(next));
            return current;
          }, []);
          this.searchResultList = data;
        });
      }
    },
    jump(id, title) {
      // this.historyList.unshift(title);
      this.$store.state.historyList.unshift(title);

      // 在页面进行跳转的时候是在watch事件监听玩之后发生  监听不到之前的数据了
      // 利用$nextTick  进行延时跳转  或者  settimeout
      this.$nextTick(() => {
        this.$router.push("/articleDetails/" + id);
      });
    },
  },
  watch: {
    // historyList() {
    //   localStorage.setItem("searchHistory", JSON.stringify(this.historyList));
    // },
    "$store.state.historyList": function () {
      localStorage.setItem(
        "searchHistory",
        JSON.stringify(this.$store.state.historyList)
      );
    },
  },
  created() {
    if (localStorage.getItem("searchHistory")) {
      // this.historyList = JSON.parse(localStorage.getItem("searchHistory"));
      const oldHistory = JSON.parse(localStorage.getItem("searchHistory"));
      this.$store.commit("recoveHistory", oldHistory);
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  .hh {
    padding: 10 /360 * 100vw 15 /360 * 100vw;
    .top {
      display: flex;
      justify-content: space-between;
    }
    .history {
      padding-bottom: 10 /360 * 100vw;
      border-bottom: 1px solid #ccc;
      .list {
        display: flex;
        flex-wrap: wrap;
        .text {
          padding: 0 8 /360 * 100vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div {
          margin-top: 8 /360 * 100vw;
          width: 150 /360 * 100vw;
          text-align: center;
        }
        div:nth-child(odd) {
          border-right: 1px solid #ccc;
        }
      }
    }
    .hot {
      margin-top: 20 /360 * 100vw;
      .list {
        display: flex;
        flex-wrap: wrap;
        div {
          margin-top: 8 /360 * 100vw;
          width: 150 /360 * 100vw;
          text-align: center;
        }
        div:nth-child(odd) {
          border-right: 1px solid #ccc;
        }
      }
    }
  }
  .searchList {
    padding: 10 /360 * 100vw 15 /360 * 100vw;
    font-size: 14 /360 * 100vw;
    .searchResult {
      padding: 5 /360 * 100vw 0;
      display: flex;
      justify-content: space-between;
      .text {
        padding-left: 8 /360 * 100vw;
        flex-grow: 1;
      }
    }
    .tips {
      font-size: 40 /360 * 100vw;
      text-align: center;
      margin-top: 250 /360 * 100vw;
    }
  }
}
</style>